<template>
  <div class="order-item  shadow-xl  transition ease-in-out  hover:scale-105 hover:-translate-x-1">
    <div class="order-item-inner" :style="getBorderStyle()">

      <img class="jiantou" :src="require(`@/assets/jiantou${index + 1}.png`)"/>
      <div class="text-box ml-24">
        <i class="iconfont icon-bianma"/>
        <span>{{$t('mes.orderNumber')}}：</span>
        <span class="font-bold" :style="`color: ${colors[props.index % colors.length]}`">{{item.soCode}}</span>
      </div>
      <div class="text-box">
        <i class="iconfont icon-ico-book1"/>
        <span>{{$t('common.RequirQty')}}：</span>
        <span class="font-bold" :style="`color: ${colors[props.index % colors.length]}`">{{item.deliveryQty}} {{item.baseUnit}}</span>
      </div>
      <div class="text-box">
        <i class="iconfont icon-ico-timepoint"/>
        <span>{{$t('common.deliveryDate')}}：</span>
        <span class="font-bold" :style="`color: ${colors[props.index % colors.length]}`">{{ dateformat(item.deliveryDate) }}</span>
      </div>
    </div>
  </div>
</template>


<script setup>

import { defineProps } from 'vue'
import moment from 'moment/moment'

const props = defineProps({
  item: { type: Object, required: true },
  index: {
    type: Number,
    default: 0
  },
})

//console.log(props.index,'index')

const colors = ['#d93e3e', '#4066d1', '#c89d1e', '#557944', '#2c7955']
// 根据 index 返回不同的边框颜色
const getBorderStyle = () => {

  return {
    border: `2px solid ${colors[props.index % colors.length]}` // 确保索引在颜色数组范围内
  }
}
const dateformat = (time) =>{
 return  moment(new Date(time)).format('YYYY-MM-DD')
}
</script>


<style scoped lang="scss">
.order-item {
  position: relative;
  width: 98%;
  height: 70px;
  display: flex;
  border-radius: 60px;
  justify-content: space-evenly;
  align-items: center;
  font-size: 18px;
  margin: 15px 8px;
  //box-shadow: inset 1px 1px 3px 0px rgba(0, 0, 0, 0.4);
  //ox-shadow: 0 0 4px rgba(0, 0, 0, 0.2), /* 外侧阴影 */
  //0 0 4px rgba(0, 0, 0, 0.2); /* 外侧模糊阴影 */
  border: 1px solid #ccc;
  padding: 6px;

  .order-item-inner {
    width: 100%;
    height: 60px;
    border-radius: 60px;
    // border: 2px solid #f11e1e;
    display: flex;
    border-radius: 60px;
    justify-content: space-evenly;
    align-items: center;
  }

  .iconfont {
    margin-right: 8px;
    font-size: 18px;
  }

  .jiantou {
    position: absolute;
    width: 80px;
    height: 48px;
    top: -10px;
    left: 26px;
  }
}

</style>
